<template>
	<view class="bigbox">
		<view class="wailunbo">
		
		<view class="lunbo">
			<swiper indicator-dots={true} autoplay={true} interval=3000 circular={true} duration=1000>
			<swiper-item v-for="(v,i) in jieshao" :key="i">
				<image :src="'/static/image-che/'+v.venuesimg[0]"></image>
				<view class="guan">{{v.venuesName}}</view>
			</swiper-item>
		</swiper>
		</view>
		</view>
		<view class="labalunbo">
		<view class="iconfont icon-weibiaoti1 laba"></view>
			<swiper  autoplay={true} interval=2000 circular={true} vertical={true} duration=500>
		<swiper-item v-for="(v,i) in titlecontent" :key="i">
			<view class="gongxi">{{v}}</view>
		</swiper-item>
	</swiper>
		</view>
		<view class="grey"></view>
		<!-- 推荐私教 -->
		<view class="xian">
			<view class="tuijiansijiao">
			<view>
				推荐私教
			</view>
			<view @click="more" class="more">更多 ></view>
		</view>
		<!-- 横向滚动 -->
		<view class="sijiaojieshao">
			<swiper indicator-dots={true}  interval=3000 circular={true} duration=1000>
			<swiper-item v-for="(v,i) in coachArr" :key="i">
				<image :src="'/static/image-che/'+v.src"></image>
				<view class="xiangqing">
					<view>
					<view class="da">{{v.name}}</view>
					<view class="xiao">
						{{v.introduce}}
					</view>
					</view>
					<view>
					<text class="lanse">￥{{v.price}}</text><text>/节</text>	
					</view>
				</view>
			</swiper-item>
		</swiper>
					</view>
		</view>
		
		<!-- 推荐课程 -->
		<view class="xian">
			<view class="tuijiansijiao">
			<view>
				推荐课程
			</view>
			<view @click="moretwo" class="more">更多 ></view>
		</view>
		<!-- 横向滚动 -->
		<view class="sijiaojieshao">
			<swiper indicator-dots={true} circular={true} duration=1000>
			<swiper-item v-for="(v,i) in courseArrjie" :key="i">
				<image :src="'/static/image-che/'+v.courseImg"></image>
				<view class="xiangqing">
					<view>
					<view class="da">{{v.courseName}}</view>
					<view class="xiao">
						{{v.classintro}}  
					</view>
					</view>
					<view>
					<text class="lanse">￥{{v.classmoney}}</text><text>/节</text>	
					</view>
				</view>
			</swiper-item>
		</swiper>
					</view>
		</view>
		<!-- 周边商店 -->
		<view >
		<view class="tuijiansijiao shangdian">
			<view>
				本店商品
			</view>
			<view @click="morethree" class="more">更多 ></view>
		</view>
		<view class="xiangqing">
			<view class="zong" v-for="(v,i) in zhoubianjie" :key="i" @click="tiaozhuan(v)">
				<view class="tu">
					<image :src="'/static/Mall/'+v.goodsImg" ></image>
				</view>
				<view class="pao">{{v.goodsName}}</view>
				<view class="tan">
					<view>￥{{v.goodsPrice[0]}}</view>
					<!-- <view @click="gouwu" class="iconfont icon-gouwuche1 che"></view> -->
				</view>
			</view>
		</view>
		</view>
		
	</view>
</template>
<script>
	import store from '../../store/index.js';
	import {toRefs,reactive} from 'vue';
	import {onShow} from '@dcloudio/uni-app';
	import myRequest from '../../utils/myRequest.js';
	export default {
		setup(){
			let data=reactive({
				jieshao:[
				],
				titlecontent:['恭喜全国第401家门店开业','恭喜全国第402家门店开业','恭喜全国第403家门店开业','恭喜全国第404家门店开业'],
				coachArr:[{src:'迪丽热巴.jpeg',name:'迪丽热巴',introduce:'核心教练，一学就会',price:'666'},
				{src:'彭于晏.jpeg',name:'彭于晏',introduce:'核心教练，一学就会',price:'888'},
				{src:'蔡徐坤.jpeg',name:'蔡徐坤',introduce:'唱跳rap篮球,样样精通',price:'333'},
				{src:'古力娜扎.jpeg',name:'古力娜扎',introduce:'核心教练，一学就会',price:'555'}],
				courseArr:[
				],
				courseArrjie:[],
				zhoubian:[
				],
				zhoubianjie:[],
				more(){
								  uni.navigateTo({
								  	url: '/pages/Appointment/PersonlManag/PersonlManag'
								  })
				},
				moretwo(){
								  uni.switchTab({
								  	url: '/pages/Appointment/Appointment'
								  })
				},
				morethree(){
								  uni.navigateTo({
								  	url: '/pages/Mall/Mall'
								  })
				},
				gouwu(){
								  uni.navigateTo({
								  	url: '/pages/Mall/ShoppingCart'
								  });
				},
				tiaozhuan: function(n) {
					uni.navigateTo({
						url: '/pages/Mall/Goods?id=' + n.goodsId
					});
				},
			});
			onShow(function(){
				// 获取商品
				myRequest({
					url: "/getgoods"
				}).then((res)=>{
					if(res.data.code==200){
						data.zhoubian=res.data.data
						data.zhoubianjie=data.zhoubian.slice(0,4)
						// data.zhoubian.forEach((item) => {
						// 	item.goodsPrice = JSON.parse(item.goodsPrice);
						// })
						data.zhoubianjie.forEach((item) => {
							item.goodsPrice = JSON.parse(item.goodsPrice);
						})
					}
					
				}),
				// 获取场馆
				myRequest({
					url:'/getvenues'
				}).then((res)=>{
					// console.log(res)
					data.jieshao=res.data.data
					data.jieshao.forEach((item)=>{
						item.venuesimg=JSON.parse(item.venuesimg)
					})
				}),
				// 获取课程
				myRequest({
					url:'/courselist'
				}).then((res)=>{
					data.courseArr=res.data.data
					data.courseArrjie=data.courseArr.slice(0,4)
				})
			})
			return {...toRefs(data)}
		}
	}
</script>

<style lang="less" scoped>
	@import url('~@/static/font-che/iconfont.css');
	.wailunbo{
		height: 390rpx;
		// z-index: 999;
	}
	.bigbox{
		.lunbo{
	width: 750rpx;
	height: 390rpx;
	position: fixed;
	top: 0rpx;
	left: 0rpx;
	z-index: 999;
	swiper{
		height: 390rpx;
	}
	.lunbo swiper-item{
		height: 390rpx;
	}
	image{
		width: 750rpx;
		height: 300rpx;
	}
}
	}
	
	.guan{
		background-color: rgb(137,137,137);
		height: 90rpx;
		margin-top: -10rpx;
		line-height: 90rpx;
		padding-left: 20rpx;
		color: white;
		font-size: 30rpx;
	}
	// .tuxia{
	// 	width: 750rpx;
	// 	height: 50rpx;
	// 	background-color: red;
	// }
.labalunbo{
	padding: 22rpx;
	width: 750rpx;
	height:100rpx;
	box-sizing: border-box;
	display: flex;
	
}
.labalunbo swiper-item,.labalunbo swiper{
	height: 50rpx;
	width: 600rpx;
}
.laba{
	color: white;
	padding: 10rpx;
	background-color: rgb(209,1,78);
	border-radius: 100rpx;
	margin-right: 15rpx;
	font-size: 38rpx;
}
.gongxi{
	font-size: 40rpx;
}
.grey{
	background-color: rgb(240,240,240);
	height: 40rpx;
}
.tuijiansijiao{
	padding: 30rpx 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	view:nth-child(1){
		border-left: 2px solid rgb(0,121,254);
		padding-left: 20rpx;	
		font-size: 32rpx;
		font-weight: 700;
	}
view:nth-child(2){
		font-size: 24rpx;
		margin-right: 20rpx;
	}
}

	.sijiaojieshao{
		text-align: center;
	width: 750rpx;
	swiper{
		height: 500rpx;
		width: 730rpx;
	}
	.sijiaojieshao swiper-item{
		height: 500rpx;
		padding: 20rpx;
		width: 730rpx;
	}
	image{
		width: 730rpx;
		height: 380rpx;
	}
}
.xiangqing{
	padding: 0rpx 30rpx;
	height: 120rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: -10rpx;
	flex-wrap: wrap;
}
.da{
	font-weight: 700;
	margin-bottom: 10rpx;
}
.xiao{
	font-size: 24rpx;
	color: rgb(153,153,153);
}
.lanse{
	font-size: 40rpx;
	color: rgb(0,204,255);
}
.xian{
	border: 1px solid rgb(233,233,233);
	padding-left: 2rpx;
}
.zong{
	height: 380rpx;
	width: 335rpx;
	margin-bottom: 20rpx;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.15);
	image{
		width: 335rpx;
		height: 240rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
}

.pao{
	font-size: 24rpx;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	padding-left: 20rpx;
}
.tan{
	padding: 0rpx 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	view:nth-child(1){
		color: rgb(0,204,255);
		font-weight: 700;
	}
}
.che{
	font-size: 48rpx;
}
</style>
